<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <title>ScarletsFrame-"keyed"</title>
  <link href="/css/currentStyle.css" rel="stylesheet"/>
</head>
<body>
  <sf-m name="benchmark">
    <div class="container">
      <div class="jumbotron">
        <div class="row">
          <div class="col-md-6">
            <h1>ScarletsFrame-"keyed"</h1>
          </div>
          <div class="col-md-6">
            <div class="row">
              <div class="col-sm-6 smallpad">
                <button type="button" class="btn btn-primary btn-block" id="run" @click="run">Create 1,000 rows</button>
              </div>
              <div class="col-sm-6 smallpad">
                <button type="button" class="btn btn-primary btn-block" id="runlots" @click="runlots">Create 10,000 rows</button>
              </div>
              <div class="col-sm-6 smallpad">
                <button type="button" class="btn btn-primary btn-block" id="add" @click="add">Append 1,000 rows</button>
              </div>
              <div class="col-sm-6 smallpad">
                <button type="button" class="btn btn-primary btn-block" id="update" @click="update">Update every 10th row</button>
              </div>
              <div class="col-sm-6 smallpad">
                <button type="button" class="btn btn-primary btn-block" id="clear" @click="clear">Clear</button>
              </div>
              <div class="col-sm-6 smallpad">
                <button type="button" class="btn btn-primary btn-block" id="swaprows" @click="swaprows">Swap Rows</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <table class="table table-hover table-striped test-data">
        <tbody id="tbody">
          <tr sf-each="x in list" class="{{ selectedItem === x ? 'danger' : '' }}">
            <td class="col-md-1">{{ x.id }}</td>
            <td class="col-md-4">
              <a class="lbl" @click="selectedItem = x">{{ x.label }}</a>
            </td>
            <td class="col-md-1">
              <a class="remove" @click="remove(x)">
                <span class="remove glyphicon glyphicon-remove" aria-hidden="true"></span>
              </a>
            </td>
            <td class="col-md-6"></td>
          </tr>
        </tbody>
      </table>
      <span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
    </div>
  </sf-m>
  <script src="dist/main.js"></script>
</body>
</html>